<template>
	<view>
		<cu-custom bgColor="bg-blue light" :isBack="true">
			<block slot="content">设置</block>
		</cu-custom>
		<view class="cu-list menu sm-border" :class="MenuCard?'card-menu margin-top':''">
			<navigator class="cu-item" :class="MenuArrow?'arrow':''" hover-class="none" url="" open-type="redirect" v-for="(item, index) in InfoList" :key="index">
				<view class="content">
					<text :class="item.icon" class="text-grey"></text>
					<text class="text-grey">{{item.title}}</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{item.text}}</text>
				</view>
			</navigator>
		</view>
		<button class="cu-btn flex margin padding-xl text-xxl bg-blue light shadow" @tap="showModal" data-target="DialogModal1">退出登录</button>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">退出登录</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					您确定要退出登录吗？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue light margin-left" @tap="hideModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				InfoList: [{
					icon: '',
					title: '切换账号',
					text: '',
				},
				{
					icon: '',
					title: '关于我们',
					text: '',
				}],
				MenuCard: true,
				MenuArrow: true,
				modalName: null,
			}
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			}
		}
	}
</script>

<style>

</style>

